<template>
  <div class="params">
    <!--1.目录 -->
    <div class="nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/params' }"
          >规格参数</el-breadcrumb-item
        >
        <el-breadcrumb-item>规格与包装</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 2.搜索框 -->
    <div class="ipt">
      <el-input
        @change="changeIpt"
        v-model="input"
        class="input"
        placeholder="请输入内容"
      ></el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
    </div>
    <!-- 3.表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="itemCatId" label="规格参数ID" width="180">
      </el-table-column>
      <el-table-column prop="id" label="类目ID" width="180"> </el-table-column>
      <el-table-column prop="specsName" label="规格名称" width="200">
      </el-table-column>
      <el-table-column prop="paramData" label="规格参数"> </el-table-column>

      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 4.分页 -->
    <Page :total="total" :pageSize="pageSize" @changePage="changePage"></Page>
    <!-- 5.弹框 -->

    <el-dialog
      title="项目规格参数类目选择"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!-- 组卷 -->
      <TreeGoods @sedTree="sedTree"></TreeGoods>

      <!-- 底层内容 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          :disabled="isdisabled"
          type="primary"
          @click="innerVisible = true"
          >确定并添加分组</el-button
        >
      </span>
    </el-dialog>
    <!-- 二级弹框 -->
    <el-dialog
      width="45%"
      title="商品参数规格配置"
      :visible.sync="innerVisible"
      append-to-body
    >
      <div>当前选中得商品：{{ treeData.label }}</div>
      <el-button type="primary" @click="addDomain" style="margin: 10px 0"
        >新增规格列表</el-button
      >
      <hr />
      <!-- 表单 -->
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="120px"
        class="demo-dynamic"
      >
        <!-- groups=[{title:'',value:'',children:[]},...] -->
        <el-form-item
          v-for="(item, index) in dynamicValidateForm.groups"
          :label="item.title + index"
          :key="index"
          :prop="item.title"
          :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }"
        >
          <div class="item">
            <el-input v-model="item.title"></el-input>
            <el-button @click.prevent="addChildDomain(index)"
              >增加子组</el-button
            >
            <el-button @click.prevent="removeDomain(index)">删除</el-button>
          </div>
          <!-- 内层的表单项 -->
          <el-form-item
            v-for="(ele, i) in item.children"
            :label="ele.title + i"
            :key="i"
            :prop="ele.title"
            :rules="{
              required: true,
              message: '域名不能为空',
              trigger: 'blur',
            }"
          >
            <div class="item">
              <el-input v-model="ele.title"></el-input>
              <el-button @click.prevent="removeChildDomain(index, i)"
                >删除</el-button
              >
            </div>
          </el-form-item>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('dynamicValidateForm')"
          >确定</el-button
        >
        <el-button @click="resetForm()">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Page from "../../../components/Pagniton.vue";
import TreeGoods from "../../Comm/TreeGoods.vue";
export default {
  components: {
    Page,
    TreeGoods,
  },
  data() {
    return {
      input: "",
      tableData: [],
      total: 10,
      pageSize: 1,
      currentPage: 1,
      list: [],
      type: 1,
      dialogVisible: false,
      innerVisible: false,
      isdisabled: true,
      treeData: {}, //tree数据
      dynamicValidateForm: {
        //动态表单
        groups: [],
      },
    };
  },
  methods: {
    handleEdit() {},
    //  增加子组
    addChildDomain(index) {
      this.dynamicValidateForm.groups[index].children.push({
        value: "",
        title: "",
      });
    },
    //删除当前组
    removeDomain(index) {
      this.dynamicValidateForm.groups.splice(index, 1);
    },
    //删除子组
    removeChildDomain(index, i) {
      this.dynamicValidateForm.groups[index].children.splice(i, 1);
    },
    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //itemCatId,content,specsName
          console.log("提交规格参数", this.dynamicValidateForm.groups);
          this.$api
            .insertItemParam({
              itemCatId: this.treeData.id,
              content: JSON.stringify(this.dynamicValidateForm.groups),
              specsName: this.treeData.label,
            })
            .then((res) => {
              console.log("------提交成功", res.data);
              if (res.data.status === 200) {
                this.innerVisible = false;
                this.dialogVisible = false;
                //清空数据
                this.dynamicValidateForm.groups = [];
                this.isDisabled = true;
                this.http(1);
              } else {
                console.log("信息提示--失败了");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置表单
    resetForm() {
      this.dynamicValidateForm.groups = [];
    },
    //新增列表
    addDomain() {
      this.dynamicValidateForm.groups.push({
        title: "",
        value: "",
        children: [],
      });
    },
    //搜索框
    changeIpt() {},
    http(page) {
      this.$api.getParams({ page }).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.tableData = res.data.data;
          this.pageSize = res.data.pageSize;
        }
      });
    },
    changePage(num) {
      this.currentPage = num;
      if (this.type == 1) {
        this.http(num);
      } else {
        this.tableData = this.list.slice((num - 1) * 3, num * 3);
      }
    },
    sedTree(val) {
      this.treeData = val;
      this.isdisabled = false;
      console.log(this.treeData);
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api
          .categoryDelete({
            id: row.id,
          })
          .then((res) => {
            // console.log(res.data);
            if (res.data.status === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.http(1);
            }
          });
      })
       .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      
    },
  },
  mounted() {
    this.http(1);
  },
};
</script>

<style lang="less" scoped>
.params {
  background: #eee;
  .nav {
    margin-left: 5px;
    margin-top: 5px;
    background-color: #fff;
    span {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
  .ipt {
    display: flex;
    padding: 20px;
    .input {
      margin-right: 10px;
    }
  }
}
.item {
  display: flex;
  margin-bottom: 10px;
  button {
    margin-left: 10px;
  }
}
</style>